import { ElButton as Button, ElInputNumber as InputNumber } from "element-plus";
import { computed, reactive } from "vue";
import { useComputed } from "./useComputed";
const totalPrice = (row: { price: number; count: number }) => {
  console.log("computed");
  return row.price * row.count;
};
const computedPrice = useComputed(totalPrice);
export default (
  handeEdit?: Function,
  handleDel?: Function,
  t?: (arg0: string) => string
) =>
  reactive([
    {
      type: "selection",
      width: "55",
    },
    {
      prop: "name",
      label: "名字",
      render(h: any, scope: { $index: any; row: any }) {
        const { $index: index, row } = scope;
        return <div>{"==" + row.name + index + "=="}</div>;
      },
    },
    {
      prop: "address",
      label: "地址",
    },
    { prop: "date", label: "日期" },
    { prop: "price", label: "单价" },
    {
      prop: "count",
      label: "数量",
      render(h: any, { row }: any) {
        return (
          <InputNumber
            min={1}
            max={10}
            modelValue={row.count}
            onChange={(value: any) => {
              row.count = value;
            }}
          />
        );
      },
    },
    {
      prop: "total",
      label: "总价",
      render(h: any, { row }: any) {
        return computedPrice(row);
      },
    },
    {
      prop: "action",
      label: "操作",
      render(h: any, scope: { $index: any; row: any }) {
        const { $index: index, row } = scope;
        return (
          <div>
            <Button
              type="primary"
              link
              onClick={() => {
                (handeEdit as Function)(row);
              }}
            >
              {t!("table.edit")}
            </Button>
            <Button
              type="primary"
              link
              onClick={() => {
                (handleDel as Function)(row.id);
              }}
            >
              {t!("table.delete")}
            </Button>
          </div>
        );
      },
    },
  ]);
